<!-- 形变功能 -->
<template>
    <myMoveBox ref="moveBoxDom" :attr="curAttr" @move="root_MoveEvent" @movebegin="root_MovebeginEvent"
        @moveend="root_MoveendEvent">
        <div class="moveBox-content" ref="contentDom" :style="curAttr.curCss" @click="open_ClickEvent">
            <slot name="show" v-if="!isShow" @mousedown="emmm111">

            </slot>
            <slot name="hide" v-else>

            </slot>
        </div>
    </myMoveBox>
</template>

<script setup>
import { onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
import myMoveBox from './index.vue'
import { MoveboxShadow } from './shadow.js'

const props = defineProps({
    attr: {
        type: {},
        default: {},
        require: false,
    }
});

const emmm111 = () => {
    console.log("emmmm")
}

const curAttr = ref({});
const defaultAttr = () => {
    return {
        zIndex: [999, 9999],//图层
        backcolor: ['#409eff', 'white'],//背景颜色
        isClick: true,//默认点击

        curCss: "",//当前rootDom的style
    };
}

const emits = defineEmits(['show']);

const isShow = ref(false);
const contentDom = ref();
const moveBoxDom = ref();
const shadow = MoveboxShadow.getInstance();

onMounted(() => {
    curAttr.value = Object.assign(defaultAttr(), shadow.getAttr(), props.attr);

    const dom = moveBoxDom.value.getRootDom();
    const attr = curAttr.value;
    const xywh = shadow.init(getCurrentInstance().exposed);
    attr.posi = [xywh[0], xywh[1]]

    moveBoxDom.value.setAttr(curAttr.value);
    moveTo({ xy: [xywh[0], xywh[1]], wh: [xywh[2], xywh[3]], duration: 0, });

    //计算初始化位置是否符合
    if (attr.posiResetTime != -1)
        setTimeout(() => {
            attr.posiIndex = shadow.initPosiIndex(attr.id);
            const posi = MoveboxShadow.computePosi(attr.posiIndex);
            moveBoxDom.value.move(posi[0], posi[1], attr.posiResetTime <= 0 ? 0 : 0.3);
        }, attr.posiResetTime);
});

onBeforeUnmount(() => {
    shadow.rem(curAttr.value.id);
});

// #region 核心逻辑
//进行形变
const moveTo = ({
    xy = [],
    wh = [],
    duration = 0.3,
}) => {
    const attr = curAttr.value;

    let curPosi = [0, 0]
    if (xy == null || xy.length != 2) {
        //自动居中
        const { clientWidth, clientHeight } = document.documentElement;
        curPosi = [(clientWidth - wh[0]) / 2, (clientHeight - wh[1]) / 2];
    } else {
        curPosi = xy;
    }

    //改变新位置
    attr.curCss = `transition-duration:${duration}s;width:${wh[0]}px;height:${wh[1] == -1 ? 'auto' : wh[1] + 'px'};background:${attr.backcolor[isShow.value ? 1 : 0]};`;
    moveBoxDom.value.move(curPosi[0], curPosi[1], duration);
}

//默认点击(只有打开的)(需要外部再次进行调用moveTo函数)
const open_ClickEvent = () => {
    const attr = curAttr.value;
    if (attr.isClick && !isShow.value) {
        isShow.value = true;
        emits('show');
    }
}

//回归原位
const reset = ({
    duration = 0.3,
} = {}) => {
    const attr = curAttr.value;
    const [x, y] = MoveboxShadow.computePosi(attr.posiIndex);
    const [w, h] = MoveboxShadow.computeWH(attr.whCount);;

    attr.curCss = `width:${w}px;height:${h}px;transition-duration:${duration}s;background:${attr.backcolor[isShow.value ? 1 : 0]};`;
    moveBoxDom.value.move(x, y, duration);
}
// #endregion

//#region rootMoveEvent
const root_MovebeginEvent = (data) => {
    if (!isShow.value) {
        shadow.getBoxPosiIndex(curAttr.value.id);
    }
}
const root_MoveEvent = (data) => {
    const attr = curAttr.value;
    if (!isShow.value)
        shadow.getShadowPosi(data[0], data[1], attr.whCount[0], attr.whCount[1]);
}
const root_MoveendEvent = (data) => {
    if (!isShow.value) {
        const attr = curAttr.value;
        const posiIndex = shadow.clear();
        const xy = MoveboxShadow.computePosi(posiIndex);
        const wh = MoveboxShadow.computeWH(attr.whCount);
        moveTo({
            xy: xy,
            wh: wh,
            duration: 0.3,
        });
    }
}
//#endregion


//#region 输出
const show = (data) => {
    isShow.value = true;
    moveTo(data);
}
const hide = (data) => {
    isShow.value = false;
    reset(data);
}
const getRoot = () => {
    return moveBoxDom.value;
}
const getAttr = () => {
    return curAttr.value;
}
const setIsMove = (data) => {
    moveBoxDom.value.setIsMove(data);
}
//#endregion
defineExpose({
    moveTo, show, hide, setIsMove, getRoot, getAttr,
});
</script>

<style lang="scss" scoped>
.moveBox-content {
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>